
<template>
    <el-form 
    
    ref="form" 
   
    :model="form" 
    
    label-width="80px" 
    enctype="multipart/form-data" >
        
        <el-form-item 
        label="账号名"
       
         >
            <el-input  v-model="form.appid" ></el-input>
        </el-form-item>
        <el-form-item 
        label="密码"
       
         >
            <el-input  v-model="form.appsecret" ></el-input>
        </el-form-item>

        <el-form-item 
        label="使用者名"
       
         >
            <el-input  v-model="form.nickname" ></el-input>
        </el-form-item>

        <el-form-item label="用户权限">
            <el-select v-model="form.scope" placeholder="用户权限">
            <el-option 
            v-for="item in form.scopeList" 
            :key="item.scope" 
            :label="item.description" 
            :value="item.scope"></el-option>
            
            </el-select>
        </el-form-item>
        <el-form-item label="分组归属">
            <el-select v-model="form.fenzu" placeholder="分组归属">
                <el-option 
            
                :key="0" 
                label="无归属" 
                value="0"></el-option>
                <el-option 
                v-for="item in form.fenzuList" 
                :key="item.id" 
                :label="item.nick_name" 
                :value="item.id"></el-option>
            
            </el-select>
        </el-form-item>



        
        

        
        
        
        
        <!-- <Editor @getEditorData="getEditorData"></Editor> -->


        <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button>取消</el-button>
        </el-form-item>
    </el-form>
</template>


<script>
import axios from 'axios'
import { mapState } from 'vuex'
import Editor from 'index/components/Editor'

const scopeList1=[{'scope':17,'description':'各地分销商'},
{'scope':18,'description':'客服'}]
const scopeList2=[{'scope':17,'description':'各地分销商'},
{'scope':18,'description':'客服'},{'scope':19,'description':'组长'},
{'scope':20,'description':'美工'},{'scope':21,'description':'审查'}]
export default {
    name:'ProcutForm', 
    inject:['reload'], 
    components:{
        Editor 
    },
    data() {
        return {
            
           
            editorData: '',
            form: {
                nickname: '',
                appid:'',
                appsecret:'',
                scopeList:[],
                scope:'',
                fenzuList:[],
                fenzu:''
            },
            formData: new FormData(),
           
        }
    },
    activated() {
        this.install()
        
    },
    computed:{
        ...mapState(['baseUrl','scope','zuzhang_scope'])
    },
    methods: {
      install(){
          this.findScope()
          this.getAllLeader()
          
          
      },
      findScope (){
          
          if(this.scope <= this.zuzhang_scope){
              this.form.scopeList = scopeList
          }else{
              this.form.scopeList = scopeList2
          }
         
      },
      getAllLeader (){
        
           axios.get(
                this.baseUrl+'cms/getAllLeader')
            .then(this.getAllLeaderSucc)
      },
      getAllLeaderSucc(result){
         this.form.fenzuList = result.data
        
       
      },  
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      
       
        onSubmit() {
             let that = this
            
           
            var nickname = this.form.nickname;
            var appid = this.form.appid;
            var appsecret = this.form.appsecret;
            var scope = this.form.scope;
            var tid = this.form.fenzu;
           
            if(nickname==''||appid==''||appsecret==''||scope==''||tid==''){
                const h = this.$createElement;

                this.$notify({
                title: '警告',
                type: 'warning',
                offset: 100,
                message: h('i', { style: 'color: teal'}, '所有信息必须填写')
                });
                return false;
            }
            //下面append的东西就会到form表单数据的fields中；
            that.formData.append('nickname', nickname);
            that.formData.append('appid', appid);
            that.formData.append('appsecret', appsecret);
            that.formData.append('scope',scope);
            that.formData.append('tid',tid);
            
             
            
            // console.log(that.formData)
            let config = {
                headers: {
                    'Content-Type': 'multipart/form-data'
                    
                },
                
                
            }
           
            axios.post(this.baseUrl+"cms/addUser", this.formData, config).then(function(result) {
                            // console.log(result);
                            // alert(result.data);

                           

                            if(result.data===true){
                                that.$alert('新增成功', '特别提示', {
                                confirmButtonText: '确定',
                                closeOnClickModal:true,
                                center:true,
                                callback: action => {
                                    that.reload();
                                    that.$router.push('/empty');
                                    that.form.nickname=null
                                    that.form.appid=null
                                    that.form.appsecret=null
                                    that.form.scope=null
                                    that.form.fenzu=null
                                    that.$message({
                                    message: '恭喜你，这是一条成功消息',
                                    type: 'success',
                                    duration:'3000',
                                    showClose:true,
                                    });
                                }
                            });
                                
                            }

                            
            })
            

        }
       
    }
}
</script>
<style lang="stylus">
.el-message-box__wrapper
    z-index 20003!important
</style>
